import React from 'react'

class StateDemo extends React.Component {
    constructor(props) {
        super(props)
        this.state = { count: 0 } // 构造函数定义state
    }
    render() {
        return <div>
            <h3>setState</h3>
            <p>{this.state.count}</p>
            <button onClick={this.increase}>累加</button>
        </div>
    }
    increase = () => {
        // 不要直接修改 state，其是不可变值
        // this.state.count++ // 错误写法
        this.setState({
            count: this.state.count + 1
        })

        // // 不可变值 - 数组
        // // 不能直接对 this.state.list 进行 push pop splice 等
        // const list5Copy = this.state.list5.slice()
        // list5Copy.splice(2, 0, 'a') // 中间插入 a
        // this.setState({
        //     list1: this.state.list1.concat(100), // 追加
        //     list2: [...this.state.list1, 100], // 追加
        //     list3: this.state.list3.slice(0, 3), // 截取
        //     list4: this.state.list4.filter(item => item > 100), // 筛选
        //     list5: list5Copy, // 其他操作
        // })

        // // 不可变值 - 对象
        // // 不能直接对 this.state.obj 进行属性设置
        // this.setState({
        //     obj1: Object.assign({}, this.state.obj1, {a: 100}), // 追加
        //     obj2: {...this.state.obj2, a: 100} // 追加
        // })

        // // setState 可能异步更新，也可能同步更新
        // this.setState({
        //     count: this.state.count + 1
        // }, () => {
        //     console.log('count by callbak', this.state.count) // 回调，类似vue的 $nextTick
        // })
        // console.log('count', this.state.count) // 异步的，拿不到最新值

        // // setTimeout 中 setState 是同步的（测试最新版本还是异步）
        // setTimeout(() => {
        //     this.setState({
        //         count: this.state.count + 1
        //     })
        //     console.log('count in setTimeout', this.state.count)
        // }, 0)

        // // 多次执行会被合并，执行结果只一次 +1
        // this.setState({
        //     count: this.state.count + 1
        // })
        // this.setState({
        //     count: this.state.count + 1
        // })
        // this.setState({
        //     count: this.state.count + 1
        // })

        // // 传入函数，不会被合并，执行结果是 +3
        // this.setState((prevState, props) => ({ count: prevState.count + 1 }))
        // this.setState((prevState, props) => ({ count: prevState.count + 1 }))
        // this.setState((prevState, props) => ({ count: prevState.count + 1 }))
    }
    // bodyClickHandler = () => {
    //     this.setState({
    //         count: this.state.count + 1
    //     })
    //     console.log('count in body event', this.state.count)
    // }
    // componentDidMount() {
    //     // 自定义的 DOM事件，setState 是同步的（测试最新版本还是异步）
    //     document.body.addEventListener('click', this.bodyClickHandler)
    // }
    // componentWillUnmount() {
    //     document.body.removeEventListener('click', this.bodyClickHandler)
    // }
}

export default StateDemo